<script setup lang="ts">
import { computed, ref } from 'vue'
// import OrderList from '@/pagesOrder/list/components/OrderList.vue'
import { getMemberProfileAPI, putMemberProfileAPI } from '@/services/profile'
let sysHeight = uni.getSystemInfoSync().statusBarHeight
// 获取页面参数
const query = defineProps<{
  type: string
}>()

// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '全部', isRender: false },
  { orderState: 1, title: '待付款', isRender: false },
  { orderState: 2, title: '待发货', isRender: false },
  { orderState: 3, title: '待收货', isRender: false },
  { orderState: 4, title: '待评价', isRender: false },
])

// 表单数据
const form = ref({
  uid: '110211', // 收货人
  real_name: '', // 联系方式
  phone: '', // 省市区(前端展示)
  salesman_phone: '', // 省份编码(后端参数)
  is_up_level: '0', // 城市编码(后端参数)
})

const addressInfo = ref([])
const addressText = ref('')
const isSelect = ref(false)

// 高亮下标
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type)))
// 默认渲染容器
orderTabs.value[activeIndex.value].isRender = true

const pageBack = (url: string) => {
  uni.reLaunch({
    url: '/pages/index/index',
  })
}

// 提取headerBg数据
const headerBg = computed(() => {
  return 'https://queen.shop.njzshm.com' + '/statics/images/promoter_apply.png'
})

const selectedGender = ref('否')
const ajaxLock = ref(false)
// 修改
const onGenderChange = (ev) => {
  form.value.is_up_level = ev.detail.value
}

// 点击保存提交表单
const submitSupply = async () => {
  ajaxLock.value = true
  if (form.value.salesman_phone && form.value.salesman_phone.length !== 11) {
    uni.showToast({ title: '业务员手机号位数不正确', icon: 'none' })
    return
  }

  //   if (!isSelect.value)
  //     return uni.showToast({
  //       title: '请阅读并同意协议',
  //     })

  //   if (ajaxLock.value)
  //     return uni.showToast({
  //       title: '请勿重复提交',
  //     })

  const { uid, real_name, phone, salesman_phone, is_up_level } = form.value
  const res = await putMemberProfileAPI({
    uid,
    real_name,
    phone,
    salesman_phone,
    is_up_level,
  })
  // 更新Store昵称
  uni.showToast({ icon: 'success', title: '提交成功' })
  ajaxLock.value = false //关闭提交锁定
}
</script>

<template>
  <view class="viewport">
    <view class="w-full fixed-lt z-20" :style="{ 'padding-top': sysHeight + 'px' }">
      <view class="h-80 px-20 flex-between-center">
        <text class="iconfont icon-ic_leftarrow fs-40 text--w111-000" @tap="pageBack"></text>
      </view>
    </view>

    <view class="header-top relative">
      <image :src="headerBg" mode=""></image>
    </view>

    <view class="bg-v-gradient pl-20 pr-20 pb-24 relative">
      <view class="bg--w111-fff rd-24rpx content-box">
        <view class="fs-30 fw-500 lh-42rpx">请填写以下信息</view>
        <view class="cell flex-between-center mt-64">
          <view class="fs-28 lh-40rpx">用户ID</view>
          <view class="fs-28 text-right">{{ form.uid }}</view>
        </view>

        <!--				<view class="cell flex-between-center mt-64">-->
        <!--					<view class="fs-28 lh-40rpx">用户ID</view>-->
        <!--					<view class="fs-28 text-right">{{ form.uid }}</view>-->
        <!--				</view>-->

        <view class="cell flex-between-center mt-64">
          <view class="fs-28 lh-40rpx">姓名</view>
          <input
            type="text"
            v-model="form.real_name"
            placeholder="请输入姓名"
            placeholder-class="text--w111-ccc"
            class="fs-28 text-right"
          />
        </view>
        <view class="cell flex-between-center mt-64">
          <view class="fs-28 lh-40rpx">手机号</view>
          <input
            type="number"
            v-model="form.phone"
            placeholder="请输入手机号"
            placeholder-class="text--w111-ccc"
            class="fs-28 text-right"
          />
        </view>

        <view class="cell flex-between-center mt-64">
          <view class="fs-28 lh-40rpx">业务员手机</view>
          <input
            type="number"
            v-model="form.salesman_phone"
            placeholder="请输入手机号（非必填）"
            placeholder-class="text--w111-ccc"
            class="fs-28 text-right"
          />
        </view>

        <!--				<view class="cell flex-between-center mt-64">-->
        <!--					<view class="fs-28 lh-40rpx">验证码</view>-->
        <!--					<view class="flex-y-center">-->
        <!--						<input type="number" v-model="form.code" placeholder="请输入验证码" placeholder-class="text&#45;&#45;w111-ccc" class="fs-28 text-right" />-->
        <!--						<button class="code-btn w-168 h-56 flex-center fs-24 ml-20" :disabled="disabled" @tap="code">{{ text }}</button>-->
        <!--					</view>-->
        <!--				</view>-->

        <view class="cell flex-between-center mt-64">
          <view class="name">收货地址</view>
          <view class="address acea-row row-between-wrapper">
            <view class="addressCon acea-row" @click="changeRegion">
              <text class="picker color-add" v-if="!addressInfo.length && !addressText"
                >请选择地区</text
              >
              <view v-else>
                <text class="picker">{{ addressText }}</text>
              </view>
            </view>
            <view class="location1" @click="chooseLocation">
              <text class="iconfont icon-ic_location1 fontcolor"></text>定位
            </view>
          </view>
        </view>

        <!--  扩展的详细地址   -->
        <!--        <view class='cell flex-between-center mt-64'>-->
        <!--          <view class='name'>详细地址</view>-->
        <!--          <view class="address flex-1">-->
        <!--            <textarea :value="userAddress.detail" name="detail" auto-height placeholder="请填写具体地址" placeholder-class="placeholder" class="textarea detail w-full" />-->
        <!--          </view>-->
        <!--        </view>-->

        <view class="cell flex-between-center mt-64">
          <text class="label">参与金牌升级考核</text>
          <radio-group :value="form.is_up_level" @change="onGenderChange">
            <label class="custom-radio" :class="{ checked: form.is_up_level === '1' }">
              <span class="dot"></span>
              <radio value="1" style="display: none" />
              <span class="text">是</span>
            </label>
            <label class="custom-radio" :class="{ checked: form.is_up_level === '0' }">
              <span class="dot"></span>
              <radio value="0" style="display: none" />
              <span class="text">否</span>
            </label>
          </radio-group>

          <!-- <view class="fs-28 lh-40rpx">参与金牌升级考核</view>
          <uni-data-checkbox v-model="form.is_up_level" selectedColor="#f9bf43" :localdata="upLevelData"
                             @change="levelChange" class="form-ipad"></uni-data-checkbox> -->
        </view>

        <isUplevel></isUplevel>

        <view class="flex-y-center flex-x-center mt-100rpx mb-24">
          <text
            class="iconfont fs-30"
            :class="isSelect ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect'"
            @tap="proviceSelect"
          ></text>
          <text class="fs-24 text--w111-999 pl-12">已阅读并同意</text>
          <text class="font-red" @tap="getAgreement">《星推说明》</text>
        </view>
        <view
          class="w-full h-88 rd-44rpx flex-center text--w111-fff fs-28"
          :class="isSelectStar ? 'bg-red' : 'bg-disabled'"
          @tap="submitSupply"
          >提交申请</view
        >
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.rule-btn {
  height: 48rpx;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 24rpx 0 0 24rpx;
  position: absolute;
  right: 0;
}

.content-box {
  padding: 48rpx 32rpx 40rpx;
}

.code-btn {
  border: 1px solid #e93323;
  color: #e93323;
  border-radius: 28rpx;
}

.upload {
  border: 1rpx dashed #ccc;
}

.del-pic {
  background-color: #999;
  border-radius: 0 16rpx 0 16rpx;
}

.icon-a-ic_CompleteSelect,
.font-red {
  color: #e93323;
}

.icon-ic_unselect {
  color: #ccc;
}

.bg-red {
  background-color: #e93323;
}

.bg-disabled {
  background-color: rgba(233, 51, 35, 0.5);
}

.desc-box {
  max-height: 700rpx;
  overflow-y: auto;
}

.modal-bottom {
  height: 136rpx;
  border-radius: 0 0 32rpx 32rpx;
  background-color: #fff;
}

.color-add {
  color: #cdcdcd;
}

.location1 {
  margin-left: 10rpx;

  .iconfont {
    margin-right: 8rpx;
  }
}

.address {
  .textarea {
    text-align: right;
  }
}

.fontcolor {
  color: var(--view-theme) !important;
}

::v-deep .checklist-box {
  margin-right: 0 !important;
  margin-left: 25px !important;
}

.warp {
  background: #ffe5d5;
  min-height: 100vh;
}

.bg-v-gradient {
  margin-top: -150rpx;
  z-index: 11;
}

.header-top {
  width: 100%;
  height: 552rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
}


// 开始单选按钮切换颜色

.custom-radio {
  display: inline-flex;
  align-items: center;
  margin-right: 32rpx;
  cursor: pointer;
  position: relative;
  font-size: 30rpx;
  user-select: none;
  transition: color 0.2s;

  .dot {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border: 2rpx solid #d1d1d1;
    background: #fff;
    margin-right: 16rpx;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text {
    color: #333;
    font-size: 28rpx;
    letter-spacing: 2rpx;
    transition: color 0.2s;
  }

  &.checked {
    color: #e93323;

    .dot {
      border-color: #e93323;
      box-shadow: 0 0 0 4rpx rgba(233, 51, 35, 0.08);
      background: #fff;
    }

    .dot::after {
      content: '';
      display: block;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background: #e93323;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(1);
      transition: background 0.2s, transform 0.2s;
    }

    .text {
      color: #e93323;
      font-weight: 600;
    }
  }

  .dot::after {
    content: '';
    display: block;
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    transition: background 0.2s, transform 0.2s;
  }
}

// 结束单选按钮切换颜色

</style>
